<template>
  <div class="app-container">

    <el-breadcrumb>
      <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单权限</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-row :gutter="10" style="margin-bottom:8px">
      <el-col :span="1.5">
        <el-button type="primary" size="small" plain @click="showDialog(undefined)">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="menuList" :expand-row-keys="expandRowKeys" :tree-props="{children:'children'}" row-key="id">
      <el-table-column prop="name" label="菜单名称"></el-table-column>
      <el-table-column label="图标" width="80">
        <template slot-scope="scope">
          <i class="iconfont" :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column label="排序序号" prop="orderNum" width="80"></el-table-column>
      <el-table-column label="权限标识" prop="permission"></el-table-column>
      <el-table-column label="组件路径" prop="component"></el-table-column>
      <el-table-column label="路由地址" prop="path"></el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showDialog(scope.row)">修改</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button style="margin:0 8px" slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @closed="handleClose" append-to-body>
      <el-form ref="saveOrUpdateForm" :rules="rules" :model="formData" label-width="80px">
        <el-form-item label="上级菜单">
          <tree-select
              v-model="formData.parentId"
              :options="menuList"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单">
          </tree-select>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="formData.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="formData.name" placeholder="输入菜单名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" v-if="formData.menuType !== 'F'">
              <el-select style="width:100%" filterable clearable v-model="formData.icon" placeholder="选择图标">
                <template slot="prefix">
                  <i class="iconfont" :class="formData.icon"></i>
                </template>
                <el-option v-for="(icon,index) in iconList" :key="index" :value="'icon'+icon.font_class">
                  <i class="iconfont" :class="'icon'+icon.font_class"></i>
                  <span style="padding-left:5px">{{ 'icon' + icon.font_class }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单排序">
              <el-input-number v-model="formData.orderNum" :min="0" :step="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径" prop="component" v-if="formData.menuType === 'C'">
              <el-input v-model="formData.component" placeholder="输入组件路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由地址" prop="path" v-if="formData.menuType === 'C'">
              <el-input v-model="formData.path" placeholder="输入路由地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识" v-if="formData.menuType !== 'M'">
              <el-input v-model="formData.permission" placeholder="输入权限标识"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import request from "@/http/request";
import qs from "qs";

export default {
  components: {TreeSelect},
  data() {
    return {
      menuList: [],
      expandRowKeys: [],
      iconList: [],
      formData: {
        id: undefined,
        parentId: undefined,
        name: '',
        orderNum: undefined,
        path: '',
        component: '',
        menuType: 'M',
        permission: '',
        icon: ''
      },
      rules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        component: [{required: true, message: '组件不能为空', trigger: 'blur'}],
        path: [{required: true, message: '路径不能为空', trigger: 'blur'}]
      },
      dialogTitle: '',
      dialogVisible: false
    };
  },
  methods: {
    listData() {
      this.menuList = [
        {
          "id": 1,
          "name": "商城管理",
          "orderNum": 1,
          "path": "",
          "component": "",
          "menuType": "M",
          "permission": "",
          "icon": "#",
          "children": [
            {
              "id": 2,
              "name": "商品类别",
              "parentId": 1,
              "orderNum": 11,
              "path": "#",
              "component": "views/mall/category",
              "menuType": "C",
              "permission": "mall:category:list",
              "icon": "#",
            },
            {
              "id": 3,
              "name": "商品管理",
              "parentId": 1,
              "orderNum": 12,
              "path": "#",
              "component": "views/mall/goods",
              "menuType": "C",
              "permission": "mall:goods:list",
              "icon": "#",
            }
          ]
        },
        {
          "id": 4,
          "name": "系统管理",
          "orderNum": 2,
          "path": "",
          "component": "",
          "menuType": "M",
          "permission": "",
          "icon": "#",
          "children": [
            {
              "id": 5,
              "name": "用户管理",
              "parentId": 4,
              "orderNum": 21,
              "path": "#",
              "component": "views/sys/user",
              "menuType": "C",
              "permission": "sys:user:list",
              "icon": "#",
            },
            {
              "id": 6,
              "name": "角色管理",
              "parentId": 4,
              "orderNum": 22,
              "path": "#",
              "component": "views/sys/role",
              "menuType": "C",
              "permission": "sys:role:list",
              "icon": "#",
            }
          ]
        }
      ]
      for (let item of this.menuList) {
        this.expandRowKeys.push(item.id.toString())
      }
      window.scrollTo(0, 0)
    },
    handleDelete(row) {
      console.log(`删除数据，id=${row.id}`)
      // TODO
      this.$message({
        type: 'success',
        message: '删除成功'
      });
    },
    showDialog(row) {
      if (row) {
        this.dialogTitle = "修改菜单"
        // TODO
        this.formData = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
      } else {
        this.dialogTitle = "新增菜单"
        this.dialogVisible = true
      }
    },
    handleClose() {
      this.formData = {
        id: undefined,
        parentId: undefined,
        name: '',
        orderNum: undefined,
        path: '',
        component: '',
        menuType: 'M',
        permission: '',
        icon: ''
      }
      this.$refs['saveOrUpdateForm'].resetFields()
      this.dialogVisible = false
    },
    saveOrUpdate() {
      const _this = this
      this.$refs['saveOrUpdateForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请正确填写参数'
          });
          return false
        }
        // TODO
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        _this.handleClose()
        _this.listData()
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  },
  mounted() {
    this.listData()
  }
}
</script>